﻿<Page
    x:Name="pageRoot"
    x:Class="eLuk.eLukEmailView"
    DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Self}}"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:eLuk"
    xmlns:data="using:eLuk.Data"
    xmlns:common="using:eLuk.Common"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

	<Page.Resources>
		<!--<ResourceDictionary>
			
		</ResourceDictionary>-->
		<SolidColorBrush x:Key="TextSelectionHighlightColorThemeBrush" Color="Coral"/>
		
		<Style x:Key="BaseTextBlockStyle" TargetType="TextBlock">
			<Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}"/>
			<Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}"/>
			<Setter Property="SelectionHighlightColor" Value="{ThemeResource TextSelectionHighlightColorThemeBrush}" />
			<Setter Property="TextTrimming" Value="CharacterEllipsis"/>
			<Setter Property="TextWrapping" Value="Wrap"/>
			<Setter Property="Typography.StylisticSet20" Value="True"/>
			<Setter Property="Typography.DiscretionaryLigatures" Value="True"/>
			<Setter Property="Typography.CaseSensitiveForms" Value="True"/>
			<Setter Property="LineHeight" Value="20"/>
			<Setter Property="LineStackingStrategy" Value="BlockLineHeight"/>
			<Setter Property="TextLineBounds" Value="TrimToBaseline"/>
			<Setter Property="OpticalMarginAlignment" Value="TrimSideBearings"/>
		</Style>

		<Style x:Key="HeaderTextBlockStyle" TargetType="TextBlock" BasedOn="{StaticResource BaseTextBlockStyle}">
			<Setter Property="FontSize" Value="56"/>
			<Setter Property="FontWeight" Value="Light"/>
			<Setter Property="LineHeight" Value="40"/>
			<Setter Property="Foreground" Value="Coral"/>
		</Style>
		<Style x:Key="SubheaderTextBlockStyle" TargetType="TextBlock" BasedOn="{StaticResource BaseTextBlockStyle}">
			<Setter Property="FontSize" Value="26.667"/>
			<Setter Property="FontWeight" Value="Light"/>
			<Setter Property="LineHeight" Value="30"/>
			<Setter Property="Foreground" Value="Coral"/>
		</Style>

		<Style x:Key="TitleTextBlockStyle" TargetType="TextBlock" BasedOn="{StaticResource BaseTextBlockStyle}">
			<Setter Property="FontWeight" Value="SemiBold"/>
			<Setter Property="Foreground" Value="Coral"/>
		</Style>

		<Style x:Key="SubtitleTextBlockStyle" TargetType="TextBlock" BasedOn="{StaticResource BaseTextBlockStyle}">
			<Setter Property="FontWeight" Value="Normal"/>
			<Setter Property="Foreground" Value="Coral"/>
		</Style>

		<Style x:Key="BodyTextBlockStyle" TargetType="TextBlock" BasedOn="{StaticResource BaseTextBlockStyle}">
			<Setter Property="FontWeight" Value="SemiLight"/>
			<Setter Property="Foreground" Value="Coral"/>
		</Style>


		<!-- Collection of items displayed by this page -->
		<CollectionViewSource
            x:Name="foldersViewSource"
            Source="{Binding eLukFolders}" />
		<CollectionViewSource
            x:Name="messagesListSource"
            Source="{Binding eLukMessages}" />
		<!--, Source={d:DesignData Source=/DataModel/eLuk.xml, Type=data:eLukDataSource}-->
	</Page.Resources>

	<Page.BottomAppBar>
		<AppBar>
			<Grid>
				<Grid.ColumnDefinitions>
					<ColumnDefinition Width="50*"/>
					<ColumnDefinition Width="50*"/>
				</Grid.ColumnDefinitions>
				<StackPanel x:Name="LeftPanel" Orientation="Horizontal" Grid.Column="0" HorizontalAlignment="Left">
					<AppBarButton x:Uid="Setting" Icon="Setting" Label="Setting" Click="Setting_Clicked"/>
					<AppBarButton x:Uid="Send/Receive" x:Name="abbSync" Icon="Sync" Label="Sync" Click="Sync_Clicked" />
					<ProgressRing x:Name="syncProgressBar" Width="40" Foreground="White" Height="40" Visibility="Collapsed"></ProgressRing>
					<!--<AppBarSeparator/>-->
				</StackPanel>
				<StackPanel x:Name="RightPanel" Orientation="Horizontal" Grid.Column="1" HorizontalAlignment="Right">
					<!--<AppBarButton x:Uid="Send/Receive" Icon="Sync" Label="Sync" />-->
					<!--<AppBarSeparator/>-->
					<AppBarButton x:Uid="Setting" Icon="Setting" Label="Setting" />
					<AppBarButton x:Uid="Reply" Icon="MailReply" Label="Reply" />
					<AppBarButton x:Uid="ReplyAll" Icon="MailReplyAll" Label="Reply All" />
					<AppBarButton x:Uid="Forward" Icon="MailForward" Label="Forward" />
					<AppBarButton x:Uid="Delete" Icon="Delete" Label="Delete" Click="btnDelete_Click" />
					<AppBarButton x:Uid="Folder" Icon="Folder" Label="Folder" Click="btnFolder_Click" />
				</StackPanel>
			</Grid>
		</AppBar>
	</Page.BottomAppBar>
	<!--
        This grid acts as a root panel for the page that defines two rows:
        * Row 0 contains the back button and page title
        * Row 1 contains the rest of the page layout
    -->
	<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" Margin="0,1,0,-1" HorizontalAlignment="Stretch">
		<Grid.ChildrenTransitions>
			<TransitionCollection>
				<EntranceThemeTransition/>
			</TransitionCollection>
		</Grid.ChildrenTransitions>
		<Grid.RowDefinitions>
			<RowDefinition Height="80"/>
			<RowDefinition Height="*"/>
		</Grid.RowDefinitions>
		<Grid.ColumnDefinitions>
			<ColumnDefinition Width="120"></ColumnDefinition>
			<ColumnDefinition Width="*"></ColumnDefinition>
		</Grid.ColumnDefinitions>
		<Grid x:Name="GroupViewContainer" Grid.Row="1" Grid.Column="0" Margin="10" Grid.ColumnSpan="2" >
			<Grid.RowDefinitions>
				<RowDefinition></RowDefinition>
			</Grid.RowDefinitions>
			<Grid.ColumnDefinitions>
				<ColumnDefinition Width="2*"/>
				<ColumnDefinition Width="5*"/>
				<!--<ColumnDefinition Width="3*"/>-->
			</Grid.ColumnDefinitions>

			<ListView Grid.Column="0" Grid.Row="0"
            x:Name="messageListView"
            AutomationProperties.AutomationId="FolderMessagesListView"
            AutomationProperties.Name="eLukMessages"
            TabIndex="1"
            ItemsSource="{Binding Source={StaticResource messagesListSource}}"
            IsSwipeEnabled="False"
            SelectionChanged="messageListView_SelectionChanged"  ItemClick="messageListView_ItemClick" IsItemClickEnabled="True" >
				<ListView.ItemTemplate>
					<DataTemplate>
						<Grid>
							<Grid.ColumnDefinitions>
								<ColumnDefinition Width="Auto"/>
								<ColumnDefinition Width="*"/>
							</Grid.ColumnDefinitions>
							<SymbolIcon Symbol="Mail" Margin="0,0,0,0" Foreground="Coral"></SymbolIcon>
							<StackPanel Grid.Column="1" Margin="2,0,0,0" Orientation="Horizontal">
								<TextBlock Text="{Binding From.DisplayName}" TextWrapping="NoWrap" Margin="5,0,0,0" Style="{StaticResource SubtitleTextBlockStyle}" Foreground="Coral"/>
							</StackPanel>
							<StackPanel Grid.Column="1" Margin="2,20,0,0" Orientation="Horizontal">
								<TextBlock Text="{Binding Subject}" TextWrapping="NoWrap" Margin="5,0,0,0" Style="{StaticResource SubtitleTextBlockStyle}" Foreground="Coral" />
							</StackPanel>
						</Grid>
					</DataTemplate>
				</ListView.ItemTemplate>
				<ListView.ItemContainerStyle>
					<Style TargetType="FrameworkElement">
						<Setter Property="Margin" Value="0,0,0,0"/>
					</Style>
				</ListView.ItemContainerStyle>
			</ListView>
			<ScrollViewer Grid.Column="1" Grid.Row="0"
            x:Name="emailScrollViewer"
            Padding="0,0,0,0"
            HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto"
            ScrollViewer.HorizontalScrollMode="Auto" ScrollViewer.VerticalScrollMode="Auto"
            ScrollViewer.ZoomMode="Disabled"
										>
				<Grid>
					<Grid.RowDefinitions>
						<RowDefinition Height="Auto"/>
						<RowDefinition Height="*"/>
					</Grid.RowDefinitions>
					<Grid.ColumnDefinitions>
						<ColumnDefinition Width="Auto"/>
						<ColumnDefinition Width="*"/>
					</Grid.ColumnDefinitions>
					<Image Name="imgAccountProfile" Source="{Binding ProfilePicture}" Grid.Row="0" Grid.Column="0" Margin="5,0,0,0" Width="90" Height="90" Stretch="UniformToFill" AutomationProperties.Name="{Binding Title}" HorizontalAlignment="Left"/>
					<StackPanel x:Name="itemDetailTitlePanel" Grid.Row="0" Grid.Column="1">
						<TextBlock x:Name="txtSubject" Margin="5,0,0,0" Style="{StaticResource SubheaderTextBlockStyle}"/>
						<TextBlock x:Name="txtFrom" Margin="5,0,0,0" Style="{StaticResource SubtitleTextBlockStyle}"/>
						<TextBlock x:Name="txtTo" Margin="5,0,0,0" Style="{StaticResource SubtitleTextBlockStyle}"/>
					</StackPanel>
					<WebView Name="wvMessageBody" Grid.Row="2" Grid.ColumnSpan="2" Margin="5,0,0,0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
				</Grid>
			</ScrollViewer>
			<VisualStateManager.VisualStateGroups>
				<!-- Visual states reflect the application's view state -->
				<VisualStateGroup x:Name="ViewStates">
					<VisualState x:Name="PrimaryView" />
					<VisualState x:Name="SinglePane">
						<Storyboard>
							<ObjectAnimationUsingKeyFrames Storyboard.TargetName="primaryColumn" Storyboard.TargetProperty="Width">
								<DiscreteObjectKeyFrame KeyTime="0" Value="*"/>
							</ObjectAnimationUsingKeyFrames>
							<ObjectAnimationUsingKeyFrames Storyboard.TargetName="secondaryColumn" Storyboard.TargetProperty="Width">
								<DiscreteObjectKeyFrame KeyTime="0" Value="0"/>
							</ObjectAnimationUsingKeyFrames>
							<ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemDetail" Storyboard.TargetProperty="Visibility">
								<DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
							</ObjectAnimationUsingKeyFrames>
							<ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemListView" Storyboard.TargetProperty="Padding">
								<DiscreteObjectKeyFrame KeyTime="0" Value="120,0,90,60"/>
							</ObjectAnimationUsingKeyFrames>
						</Storyboard>
					</VisualState>
					<!--
                    When an item is selected and only one pane is shown the details display requires more extensive changes:
                     * Hide the master list and the column it was in
                     * Move item details down a row to make room for the title
                     * Move the title directly above the details
                     * Adjust padding for details
                 -->
					<VisualState x:Name="SinglePane_Detail">
						<Storyboard>
							<ObjectAnimationUsingKeyFrames Storyboard.TargetName="primaryColumn" Storyboard.TargetProperty="Width">
								<DiscreteObjectKeyFrame KeyTime="0" Value="0"/>
							</ObjectAnimationUsingKeyFrames>
							<ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemListView" Storyboard.TargetProperty="Visibility">
								<DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
							</ObjectAnimationUsingKeyFrames>
							<ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemDetail" Storyboard.TargetProperty="(Grid.Row)">
								<DiscreteObjectKeyFrame KeyTime="0" Value="1"/>
							</ObjectAnimationUsingKeyFrames>
							<ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemDetail" Storyboard.TargetProperty="(Grid.RowSpan)">
								<DiscreteObjectKeyFrame KeyTime="0" Value="1"/>
							</ObjectAnimationUsingKeyFrames>
							<ObjectAnimationUsingKeyFrames Storyboard.TargetName="titlePanel" Storyboard.TargetProperty="(Grid.Column)">
								<DiscreteObjectKeyFrame KeyTime="0" Value="1"/>
							</ObjectAnimationUsingKeyFrames>
							<ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemDetailGrid" Storyboard.TargetProperty="Margin">
								<DiscreteObjectKeyFrame KeyTime="0" Value="0,0,0,60"/>
							</ObjectAnimationUsingKeyFrames>
							<ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemDetail" Storyboard.TargetProperty="Padding">
								<DiscreteObjectKeyFrame KeyTime="0" Value="120,0,90,0"/>
							</ObjectAnimationUsingKeyFrames>
						</Storyboard>
					</VisualState>
				</VisualStateGroup>
			</VisualStateManager.VisualStateGroups>
		</Grid>
		<Grid Grid.Column="0" Grid.Row="0" Grid.ColumnSpan="2">
			<Grid.ColumnDefinitions>
				<!--<ColumnDefinition Width="80"></ColumnDefinition>-->
				<!--<ColumnDefinition Width="*"></ColumnDefinition>-->
				<!--<ColumnDefinition Width="180"></ColumnDefinition>-->
				<!--<ColumnDefinition Width="80"></ColumnDefinition>-->
				<ColumnDefinition Width="*"></ColumnDefinition>
			</Grid.ColumnDefinitions>
			<!--<Button x:Name="backButton" Grid.Column="0" Grid.Row="0" Command="{Binding NavigationHelper.GoBackCommand, ElementName=pageRoot}"
                        Style="{StaticResource NavigationBackButtonNormalStyle}"
                        VerticalAlignment="Center" HorizontalAlignment="Center"
                        AutomationProperties.Name="Back"
                        AutomationProperties.AutomationId="BackButton"
                        AutomationProperties.ItemType="Navigation Button"/>-->
			<TextBlock x:Name="pageTitle" Text="My Text" Grid.Row="0" Grid.Column="1" FontSize="32" Margin="15,0,0,0" 
								 IsHitTestVisible="false" TextWrapping="NoWrap" VerticalAlignment="Center" Style="{StaticResource HeaderTextBlockStyle}" >
			</TextBlock>
		</Grid>

		<ContentControl  x:Name="popUpContainer" Height="auto" HorizontalAlignment="Stretch" VerticalAlignment="Center">
			<Popup x:Name="loginPopup" IsOpen="False" Width="auto" >
				<StackPanel Orientation="Vertical" Background="Coral" Height="250" x:Name="popUpContent" VerticalAlignment="Center" >
					<StackPanel>
						<TextBlock Text="Sign-in with an Account"  HorizontalAlignment="Center" Foreground="White" FontSize="25" Margin="10" />
					</StackPanel>
					<StackPanel Orientation="Horizontal" Margin="0,10" HorizontalAlignment="Center" >
						<TextBlock Text="Email ID" Margin="10" Foreground="White" FontSize="20" />
						<TextBox x:Name="txtLoginEmailID"  Height="30" Margin="10,1" Width="300" Text="smtp1981@gmail.com" Foreground="LightGray" Background="White" GotFocus="txtLoginEmailID_GotFocus" LostFocus="txtLoginEmailID_LostFocus" />
					</StackPanel>
					<StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
						<TextBlock Text="Password" Margin="0,0,10,1" Foreground="White"  FontSize="20" />
						<PasswordBox  x:Name="txtLoginPassword" Margin="5,1" Height="30"  Width="300" Password="o$mtp!(*#$@1@g" Foreground="LightGray" Background="White" />
					</StackPanel>
					<StackPanel Orientation="Horizontal" Margin="10,10,0,0" HorizontalAlignment="Center">
						<CheckBox IsChecked="True" >Remember account passward</CheckBox>
					</StackPanel>
					<StackPanel Orientation="Horizontal" Margin="0,10" HorizontalAlignment="Center">
						<Button x:Name="btnLogin" Click="btnLogin_Click" Foreground="White"   Width="100" Content="Login" ></Button>
						<Button x:Name="btnCancelLogin" Click="btnCancelLogin_Click" Foreground="White"  Width="100" Content="Cancel" ></Button>
					</StackPanel>
				</StackPanel>
			</Popup>
		</ContentControl>

		<ContentControl  x:Name="popUpProgressContainer" Height="auto" HorizontalAlignment="Stretch" VerticalAlignment="Center">
			<Popup x:Name="progressPopup" IsOpen="False" Width="auto" >
				<StackPanel Orientation="Vertical" Background="Coral" Height="250" x:Name="progressPopupContent" VerticalAlignment="Center" >
					<StackPanel>
						<TextBlock Text="Configuring your account. This may take some time..."  HorizontalAlignment="Center" Foreground="White" FontSize="25" Margin="10" />
					</StackPanel>
					<StackPanel Orientation="Horizontal" Margin="0,20" HorizontalAlignment="Center">
						<ProgressRing x:Name="progressRing" Foreground="White" Width="50" Height="50" ></ProgressRing>
					</StackPanel>
					<StackPanel>
						<TextBlock x:Name="txtProgressMessage" Text="Logging in for your account..."  HorizontalAlignment="Center" Foreground="White" FontSize="20" Margin="0,50,0,0" />
					</StackPanel>
				</StackPanel>
			</Popup>
		</ContentControl>
	</Grid>

</Page>
